<template>
  <uni-nav-bar :title="display_user" fixed statusBar class="navbar" height="90rpx">
    <template #left>
      <view class="left" v-if="upLoadFlag === true" @click="upLoadAll">
        <!-- <uni-icons type="cloud-upload-filled" color="" size="24" /> -->
        <wd-icon name="cloud-upload" size="46rpx" color="#3366ff"></wd-icon>
      </view>
    </template>
    <template #right>
      <view class="logout" @click="onShowLogoutAction">
        <wd-icon name="logout" size="46rpx" color="#ED1C24"></wd-icon>
      </view>
    </template>
  </uni-nav-bar>
  <view class="index-page">
    <!-- 用户信息 -->
    <!-- <view class="user-info" v-if="userStore.userInfo?.name.indexOf('(') === -1"
      >{{ userStore.userInfo?.name }}({{ userStore.userInfo?.env_company }})</view
    > -->
    <!-- <view class="user-info" v-else>{{ userStore.userInfo?.name }}</view> -->
    <!-- 数据列表 -->
    <uni-table border stripe emptyText="暂无更多数据">
      <view class="data-list">
        <checkbox-group @change="onChecked">
          <!-- :url="`/pagesTest/test1/test1?id=${item.id}`" -->
          <view
            class="data-list-item"
            v-for="item in workMainDataByUser"
            :key="item.id"
            :class="{ checked: checkboxValue.includes(String(item.id)) }"
          >
            <!-- 工序单号 -->
            <view class="data-list-item-header">
              <checkbox
                :value="String(item.id)"
                :disabled="item.no_pass && !checkFlag[item.id]"
                style="padding: 8px"
              ></checkbox>
              <view class="data-list-item-header-display_name" @click="toWorkMain(item.id)">
                工序单号：{{ item.name }}
                <!-- <text style="color: #4cd964; font-weight: normal">（{{ item.company_id[1] }}）</text> -->
              </view>
            </view>
            <!-- 机型 -->
            <view class="data-list-item-prd_name">机型：{{ item.meas_id[1] }}</view>
            <view class="data-list-item-group">
              <!-- 机号 -->
              <view class="data-list-item-group-prd_id">
                <view class="title">机号</view>
                <view class="value">{{ item.prd_id[1] }}</view>
              </view>
              <!-- 工程编号 -->
              <view class="data-list-item-group-prd_num">
                <view class="title">工程编号</view>
                <view class="value">{{ item.prd_num }}</view>
              </view>
              <!-- 工序名称 -->
              <view class="data-list-item-group-title" v-if="item.title">
                <view class="title">工序名称:</view>
                <text class="value">{{ item.title ? item.title : '' }}</text>
              </view>
            </view>
            <!-- 工艺卡文件 -->
            <view class="data-list-item-ref" v-if="item.ref">
              工艺卡号：{{ item.ref ? item.ref : '' }}
            </view>
            <!-- 工艺要求 -->
            <!-- <uni-collapse>
              <uni-collapse-item title="工艺要求">
                <text class="data-list-item-require">{{ item.require ? item.require : '无' }}</text>
              </uni-collapse-item>
            </uni-collapse> -->
            <view class="data-list-item-group-2">
              <!-- 关键过程 -->
              <view class="data-list-item-key_image">
                <image
                  v-if="item.key"
                  class="pic"
                  :src="'data:image/jpeg;base64,' + item.key_image"
                  mode="aspectFit"
                ></image>
              </view>
              <!-- 放行 -->
              <!-- 事件处理函数，如果传递多个参数必须指定函数名，在外面处理。按箭头函数写。如下@change -->
              <view class="data-list-item-no_pass" style="transform: scale(0.75)">
                <!-- {{ item.no_pass ? '不放行' : '放行' }} -->
                可放行
                <!-- {{ users }}-{{ userStore.userInfo?.uid }} -->
                <switch
                  :disabled="!users.includes(userStore.userInfo?.uid)"
                  :checked="!item.no_pass"
                  @change="(e) => changePass(e, item)"
                />
              </view>
            </view>
          </view>
        </checkbox-group>
      </view>
    </uni-table>
    <!-- <view class="logout">
      <button @click="lgout" class="lgout">退出</button>
      <button @click="onLogout" class="onLogout">清空退出</button>
    </view> -->
    <!-- 退出对话框 -->
    <view class="dialog">
      <wd-action-sheet
        v-model="logoutActionShow"
        :actions="logoutActions"
        @select="logout"
        cancel-text="取消"
      />
    </view>
  </view>
</template>

<script setup>
import { onMounted, ref, computed, onUpdated } from 'vue'
import {
  apiGetWorkmain,
  apiGetPassUsers,
  apiGetWorksub,
  apiPutMeasData,
  apiGetTools,
  apiPutToolsData,
  apiWriteToolData,
  apiGetSelfChUsers,
} from '@/api/apis'
// 使用store
import { useUserStore, useWorkmainStore, useWorksubStore, useWorktoolStore } from '@/stores'
import { onShow } from '@dcloudio/uni-app'
const userStore = useUserStore()
const workmainStore = useWorkmainStore()
const worksubStore = useWorksubStore()
const worktoolStore = useWorktoolStore()

// work-main数据列表
const workMainData = ref([])
//有权放行的用户组
const users = ref([])
// 按当前登录用户过滤的work-main数据列表
const workMainDataByUser = ref([])
//集中显示在导航栏的用户及组织
// const display_user = ref()
let display_user = computed(() => {
  let userinfo = userStore.userInfo
  if (userinfo.name?.indexOf('(') === -1 && userinfo.env_company !== undefined) {
    return userinfo.name + '(' + userinfo.env_company + ')'
  } else {
    return userinfo.name
  }
})
// display_user.value =
//   userStore.userInfo.name?.indexOf('(') === -1
//     ? userStore.userInfo.name + '(' + userStore.userInfo.env_company + ')'
//     : userStore.userInfo.name
//判断是否显示上传数据图标的变量
const upLoadFlag = ref(false)
//可放行按钮点击后的变化
function changePass(e, item) {
  checkFlag.value[item.id] = e.detail.value
  console.log(checkFlag.value[item.id])
}
//设置checked 否的参数
const checkFlag = ref({})
// 跳转到工单操作页面 tabBar
function toWorkMain(work_main_id) {
  worksubStore.setCurrentWorkMainId(work_main_id)
  uni.switchTab({
    url: '/pages/work/work',
  })
}
onShow(() => {
  // console.log('index-show')
  workMainData.value = workmainStore.records
  //过滤当前用户可访问的数据
  workMainDataByUser.value = workmainStore.records.filter((v) => {
    if (v.permit_user_ids.includes(userStore.userInfo.uid)) {
      return v
    }
  })
  //所有workmaindata只要有一个no_pass=false,则upLoad=true
  // upLoadFlag.value = workMainData.value.some((ele) => {
  upLoadFlag.value = workMainDataByUser.value.some((ele) => {
    if (ele.no_pass == false) {
      return true
    } else return false
  })
  // console.log(upLoadFlag.value)
})
//上传数据
function upLoadAll() {
  // console.log('upLoadAll')
  //上传工具数据
  upLoadTools()
  //上传工单数据
  upLoad()
}
async function upLoadTools() {
  const tools = worktoolStore.tools
  //需要上传添加的工具信息
  let putTools = tools
    .filter((v) => v.changeTool === 'put')
    .map((v) => ({ deviceId: v.deviceId, partno: v.partno, key: v.key }))
  //需要上传去修改 没有partno只有deviceId的工具信息
  let writeTools = tools.filter((v) => v.changeTool === 'write')
  if (putTools.length !== 0) {
    await putToolsData(putTools)
  } else if (writeTools.length !== 0) {
    for (let val of writeTools) {
      await writeToolData(val.id, { partno: val.partno })
    }
  }
  //已经上传的工具信息重新设置为chengTool=no,保证不再上传
  for (let obj of tools) {
    if (obj.changeTool === 'put' || obj.changeTool === 'write') {
      obj.changeTool = 'no'
    }
  }
  // worktoolStore.clearTools()
}
async function putToolsData(putTools) {
  await apiPutToolsData(putTools)
  // uni.showToast({ title: '工具信息上传成功！' })
}
async function writeToolData(id, partno) {
  await apiWriteToolData(id, partno)
  // uni.showToast({ title: '工具信息修改成功！' })
}
function upLoad() {
  workMainData.value = workmainStore.records
  const worksub = worksubStore.records
  let main = {}
  const value_list = []
  // const jpeg_prefix_length = 'data:image/jpeg;base64,'.length
  // const png_prefix_length = 'data:image/png;base64,'.length

  // console.log(checkboxValue.value)
  // console.log(workMainData.value)
  //获取上传的数据
  for (let i of checkboxValue.value) {
    let num = Number(i)
    main = workMainData.value.find((item) => {
      return item.id === num
    })
    for (let sub of worksub[num]) {
      value_list.push({
        //在签名确认时要截取前面的：'data:image/png;base64,' 部分
        signature: main.signature && main.signature.split('base64,')[1],
        // permit_user_ids: main.permit_user_ids,
        meas_main_id: main.main_id[0],
        no_pass: main.no_pass,
        // 在拍照的地方需要显示，所以只能到这里来截取前面部分
        photo: sub.photo && sub.photo.split('base64,')[1],
        meas_main_sub_id: sub.meas_main_sub_id[0],
        operator_id: sub.operator_id,
        company_id: sub.company_id[0],
        datetime_work: sub.datetimeUTC,
        result: sub.result,
        check: sub.check,
        real_value: sub.real_value,
        real_value2: sub.real_value2,
        deviceId: sub.deviceId,
        check_value: sub.check_value,
        check_value2: sub.check_value2,
        dv: sub.dv,
        dh: sub.dh,
        pass_flag: main.pass_flag,
        real_temperature: main.real_temperature,
        real_humidity: main.real_humidity,
      })
    }
  }
  console.log(value_list)
  //上传数据
  PutMeasData(value_list)
  //刷新页面，上传后再检测是否还有no_pass=false的workMainData
  workMainData.value = workmainStore.records
  //所有workmaindata只要有一个no_pass=false,则upLoad=true
  upLoadFlag.value = workMainData.value.some((ele) => {
    if (ele.no_pass == false) {
      return true
    } else return false
  })
}
function PutMeasData(value_list) {
  apiPutMeasData(value_list)
    .then(() => {
      for (let i of checkboxValue.value) {
        let num = Number(i)
        //上传成功后删除workmain数据
        workmainStore.records.forEach((element, index) => {
          if (element.id === num) {
            workmainStore.deleteRecord(index)
          }
        })
        //上传成功后删除worksub数据
        worksubStore.deleteRecord(num)
      }
      workMainData.value = workmainStore.records
    })
    .catch((err) => console.log(err))
}
// 获取work-main数据
async function getworkMainData() {
  const uid = userStore.userInfo.uid
  const users = userStore.userInfo.users
  const res = await apiGetWorkmain(uid)
  let resRecords = res.data.result.records
  // console.log('res', resRecords)
  let difference = []
  //商店中没有数据，直接将请求的数据写入商店
  if (workmainStore.records.length === 0) {
    workmainStore.records = res.data.result.records
    console.log('workmainStore', workmainStore.records)
    //商店中有数据，需要比较请求的数据，商店数据不包含请求的数据项时，则添加至商店
  } else {
    let arr1 = []
    let arr2 = []
    //过滤当前用户有权限的数据
    workMainDataByUser.value = workmainStore.records.filter((v) => {
      if (v.permit_user_ids.includes(userStore.userInfo.uid)) {
        return v
      }
    })
    // 要push v.main_id[0]而不是v.id,因为服务器重新下发时，它的id会改变，而main_id[0]是代表工序单所对应的工单，防止移动端重复获取
    resRecords.forEach((v) => arr1.push(v.main_id[0]))
    workMainDataByUser.value.forEach((v) => arr2.push(v.main_id[0]))
    console.log('resRecords,workmanByuser_list', [arr1, arr2])
    //追加工单数据情况
    if (arr1.length >= arr2.length) {
      difference = arr1.filter((x) => !arr2.includes(x))
      console.log('req>mainstorediff', difference)
      if (difference.length > 0) {
        // console.log(resRecords.filter((item) => difference.includes(item.id)))
        //新数据添加到store中
        workmainStore.records.push(
          ...resRecords.filter((item) => difference.includes(item.main_id[0])),
        )
      }
      //服务器取消了部分工单即减少了工单数据情况，确认删除本地多余的工单数据，
    } else {
      difference = arr2.filter((x) => !arr1.includes(x))
      console.log('req<mainstorediff', difference)
      // let changeRescords = workmainStore.records
      let changeRescords = workMainDataByUser.value
        .filter((item) => difference.includes(item.main_id[0]))
        .map((v) => v.main_id[1])
      if (changeRescords.length > 0) {
        try {
          const res = await uni.showModal({
            title: '提示',
            content: '已取消下发的工单: ' + changeRescords + '，是否删除？',
            confirmText: '确定',
            cancelText: '取消',
            showCancel: true,
            confirmColor: '#dd524d',
          })
          //确认移动端删除服务器已经取消下发的工单
          if (res.confirm) {
            //删除服务器已经取消的工单数据即删除本地多余的工单数据
            for (let i = 0; i < difference.length; i++) {
              let index = workmainStore.records.findIndex(
                (item) => item.main_id[0] === difference[i],
              )
              let main_id = workmainStore.records[index].id
              console.log('index-id', [index, main_id])
              workmainStore.records.splice(index, 1)
              worksubStore.deleteRecord(main_id)
            }
            //过滤当前用户可访问的数据
            workMainDataByUser.value = workmainStore.records.filter((v) => {
              if (v.permit_user_ids.includes(userStore.userInfo.uid)) {
                return v
              }
            })
            console.log('workmainByUser-删除后', workMainDataByUser.value)
          }
        } catch (error) {
          console.log('error', error)
        }
      }
    }
  }
}

// 复选框选中值
const checkboxValue = ref([])
function onChecked(e) {
  checkboxValue.value = e.detail.value
  console.log('checkbox-value', e.detail.value)
  upLoadFlag.value = Boolean(checkboxValue.value.length)
}

// 动作面板
const logoutActionShow = ref(false)
const logoutActions = ref([
  {
    name: '仅退出',
    // subname: '返回到登录',
  },
  {
    name: '退出并清空',
    color: '#fa4350',
    // subname: '退出登录并清空数据',
  },
])
function onShowLogoutAction() {
  logoutActionShow.value = true
}
// 动作面板选择
function logout({ index }) {
  switch (index) {
    case 0:
      lgout()
      break
    case 1:
      onLogout()
      break
  }
}

// 退出登录
function lgout() {
  // uni.redirectTo({ url: '/pages/login/login' })
  uni.redirectTo({ url: '/pages/loginok/loginok' })
}
function onLogout() {
  uni.showModal({
    title: '提示',
    content: '清空数据退出，确定吗？',
    confirmText: '确定',
    cancelText: '取消',
    success: (res) => {
      if (res.confirm) {
        // uni.clearStorageSync()
        userStore.clearToken()
        userStore.clearUserInfo()
        workmainStore.clearRecords()
        worksubStore.clearRecords()
        worksubStore.ClearCurrentWorkMainId()
        worktoolStore.clearTools()
        worktoolStore.clearDevices()
        worktoolStore.clearDeviceId()
        uni.redirectTo({
          url: '/pages/loginok/loginok',
        })
      }
    },
  })
}

//请求workmain及worksub数据函数
async function requestData() {
  //下面对promises里面的请求做异步，成功后，做getworksubdata
  uni.showLoading({ title: '加载...' })
  //过滤当前用户有权限的数据
  workMainDataByUser.value = workmainStore.records.filter((v) => {
    if (v.permit_user_ids.includes(userStore.userInfo.uid)) {
      return v
    }
  })
  // console.log('workmainByUser-req', workMainDataByUser.value)
  const work_main_ids = []
  workMainDataByUser.value.forEach((item) => {
    work_main_ids.push(item.id)
  })
  // console.log('wmids-req', work_main_ids)
  const sub_list = []
  //当没有商店数据时，直接发请求获取
  // if (work_main_ids.length === 0) { //不会有这种情况
  //   // await getworkMainData() //请求数据，这是workmainStore.records就有数据了
  //   for (let item of workMainData.value) {
  //     sub_list.push(getWorksubData(item.id))
  //   }
  // } else {

  //当有存储数据store时，不能重新请求获取，保留存储已有的数据
  // await getworkMainData() //可以判断服务端已经取消下发而本地还存在
  let diff = []
  let worksubKey_list = []
  // console.log('worksubstore-req', worksubStore.records)
  //过滤当前用户可访问的数据
  workMainDataByUser.value = workmainStore.records.filter((v) => {
    if (v.permit_user_ids.includes(userStore.userInfo.uid)) {
      return v
    }
  })
  //将值为undefined的key删除,并且是在workMainDataByUser中存在的key
  Object.keys(worksubStore.records).forEach((key) => {
    if (
      worksubStore.records[key] !== undefined &&
      workMainDataByUser.value.map((v) => v.id).includes(parseInt(key))
    ) {
      worksubKey_list.push(parseInt(key))
    }
  })

  console.log('workmain_ids,worksubKey_list', [work_main_ids, worksubKey_list])
  //当workmain的id数组多于worksub数组中的main_id个数时，需要根据workmain添加worksub,保证只对新的workman获取相应的worksub,不全部重新获取避免刷新已操作的worksub数据
  if (work_main_ids.length - worksubKey_list.length >= 0) {
    diff = work_main_ids.filter((item) => !worksubKey_list.includes(item))
    console.log('m>s', diff)
    diff.forEach(async (item) => {
      sub_list.push(getWorksubData(item))
    })
    //当workmain的id数组小于worksub数组中的main_id个数时，标明有删除了workmain但是对应的worksub并未删除。做删除处理
  } else {
    diff = worksubKey_list.filter((item) => !work_main_ids.includes(item))
    console.log('m<s', diff)
    //下面情况比较危险,暂时忽略，作为调试
    // diff.forEach((item) => {
    //   worksubStore.records[item] = undefined
    // })
  }
  // }
  console.log('sub_list', sub_list)
  //将循环请求放在promise.all里做异步执行
  Promise.all(sub_list)
    .then((res) => {
      if (res.length === sub_list.length) {
        console.log('数据请求成功！')
        uni.hideLoading()
      }
    })
    .catch((err) => console.log(err))
}
onMounted(async () => {
  console.log(getApp().globalData.isFromLogin, getApp().globalData.hasNetwork)
  if (userStore.userInfo.name) {
    //如果是从登录页面跳转的并且是有网络的情况下，则执行数据请求。无网络时无需登录验证，用已经存储的数据store渲染
    if (getApp().globalData.isFromLogin && getApp().globalData.hasNetwork) {
      console.log('index-mount')
      await GetPassUsersData()
      await GetSelfChUsersData()
      await getWorktoolData()
      await getworkMainData()
      await requestData()
    }
    users.value = userStore.userInfo.users
    console.log('pass_users', users.value)
    //在login设置的isFromLogin为true时，则说明是从登录页面跳转的需要请求数据(执行上面)，请求完后设置为false即其他页面过来都不需请求数据
    getApp().globalData.isFromLogin = false

    //过滤当前用户可访问的数据
    workMainDataByUser.value = workmainStore.records.filter((v) => {
      if (v.permit_user_ids.includes(userStore.userInfo.uid)) {
        return v
      }
    })
    //所有workmaindata只要有一个no_pass=false,则upLoad=true
    upLoadFlag.value = workMainDataByUser.value.some((ele) => {
      if (ele.no_pass == false) {
        return true
      } else return false
    })
    // console.log(upLoadFlag.value)
  } else {
    uni.showToast({
      title: '无网络并且无存储数据，重新联网登录!',
      icon: 'error',
    })
    uni.redirectTo({ url: '/pages/loginok/loginok' })
  }
})
//获取可设置放行的用户组
async function GetPassUsersData() {
  const res = await apiGetPassUsers()
  //将可设置放行的用户组加入仓库
  userStore.setUserInfo({ ...userStore.userInfo, users: res.data.result.records[0].users })
  // console.log(res.data.result.records[0].users)
  users.value = res.data.result.records[0].users
}
//获取可自选量具的用户组
async function GetSelfChUsersData() {
  const res = await apiGetSelfChUsers()
  //将可设置放行的用户组加入仓库
  userStore.setUserInfo({ ...userStore.userInfo, selfChusers: res.data.result.records[0].users })
  // console.log(res.data.result.records[0].users)
}

//获取所有已经请求的workMain数据对应的worksub数，并存入仓库，后期是在没有网络的情况下操作所有
// 获取worksub数据
async function getWorksubData(work_main_id) {
  const res = await apiGetWorksub(work_main_id)
  // uni.setStorageSync(work_main_id,res.data.result.records)
  worksubStore.setRecords(work_main_id, res.data.result.records)
  // worksubData.value = res.data.result.records
  // worksubData.value = worksubStore.subRecords[work_main_id]
}
//获取工具信息
async function getWorktoolData() {
  const res = await apiGetTools()
  worktoolStore.setTools(res.data.result.records)
  console.log(res)
}
</script>
<style lang="scss" scoped>
/* 全局样式优化 由AI提供*/
page {
  background: linear-gradient(135deg, #f5f7fa 0%, #e4edf9 100%);
  min-height: 100vh;
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
}

/* 导航栏优化 */
.navbar {
  font-weight: 700;
  background: linear-gradient(90deg, #1a73e8 0%, #0d47a1 100%);
  color: white !important;
  // color: black !important;
  box-shadow: 0 2px 10px rgba(13, 71, 161, 0.2);

  :deep(.uni-nav-bar-text) {
    color: black !important;
  }
  .left {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* 主内容区优化 */
.index-page {
  padding: 15px;

  .user-info {
    background: white;
    padding: 12px 20px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
    font-weight: 600;
    color: #1a73e8;
    text-align: center;
    border-left: 4px solid #1a73e8;
  }
}

/* 数据列表优化 */
.data-list {
  &-item {
    background: white;
    border-radius: 16px !important;
    overflow: hidden;
    margin-bottom: 20px;
    // box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.08);
    box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
    border: 1px solid transparent;

    &-header {
      display: flex;
      align-items: center;
      padding: 15px 20px;
      background: linear-gradient(90deg, rgba(26, 115, 232, 0.05) 0%, rgba(255, 255, 255, 0) 100%);
      border-bottom: 1px solid #f0f4f8;

      &-display_name {
        font-weight: 700;
        font-size: 14px;
        color: #1a73e8;
        flex: 1;
        padding-left: 15px;
        transition: all 0.2s;
      }
    }

    &-prd_name {
      padding: 10px 20px;
      font-size: 15px;
      color: #5f6368;
      background: #f8fafc;
      border-bottom: 1px solid #edf2f7;
    }

    &-group {
      display: flex;
      padding: 15px 20px;
      border-bottom: 1px solid #edf2f7;

      > view {
        flex: 1;
        text-align: center;

        .title {
          font-size: 13px;
          color: #718096;
          margin-bottom: 5px;
        }

        .value {
          font-weight: 600;
          font-size: 15px;
          color: #2d3748;
        }
      }
    }

    &-ref {
      padding: 15px 20px;
      color: #4a5568;
      font-size: 14px;
      background: #f8fafc;
      border-bottom: 1px solid #edf2f7;
    }

    &-group-2 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 20px;

      &-no_pass {
        display: flex;
        align-items: center;
        font-size: 15px;
        color: #4a5568;

        switch {
          margin-left: 10px;
          transform: scale(0.9);
        }
      }
    }

    /* 选中状态效果 */
    &.checked {
      border: 2px solid #1a73e8;
      box-shadow: 0 8px 20px rgba(26, 115, 232, 0.15);
      transform: translateY(-3px);

      .data-list-item-header-display_name {
        color: #0d47a1;
        transform: scale(1.02);
      }
    }

    /* 图片样式 */
    .pic {
      height: 50px;
      width: 70px;
      border-radius: 6px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      border: 1px solid #e2e8f0;
    }
  }
}

/* 退出按钮优化 */
.logout {
  display: flex;
  justify-content: space-between;
  margin: 25px 0;
  padding: 0 10px;

  button {
    flex: 1;
    margin: 0 10px;
    height: 50px;
    border-radius: 14px !important;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

    &::after {
      display: none;
    }

    &.lgout {
      background: linear-gradient(90deg, #1a73e8 0%, #0d47a1 100%);
      color: white;

      &:active {
        transform: translateY(3px);
        box-shadow: 0 2px 6px rgba(13, 71, 161, 0.3);
      }
    }

    &.onLogout {
      background: linear-gradient(90deg, #e53e3e 0%, #c53030 100%);
      color: white;

      &:active {
        transform: translateY(3px);
        box-shadow: 0 2px 6px rgba(197, 48, 48, 0.3);
      }
    }
  }
}

/* 微动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.data-list-item {
  animation: fadeIn 0.4s ease forwards;

  @for $i from 1 through 10 {
    &:nth-child(#{$i}) {
      animation-delay: $i * 0.08s;
    }
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .data-list-item-group {
    flex-wrap: wrap;

    > view {
      flex: 0 0 50%;
      margin-bottom: 15px;
    }
  }

  .logout {
    flex-direction: column;

    button {
      width: 100%;
      margin: 10px 0;
    }
  }
}
</style>
<!-- <style lang="scss" scoped>
page {
  background: $bg-grey-color;
}
.navbar {
  font-weight: 700;
  :deep(.uni-icons) {
    font-size: 25px !important;
  }
}
.logout {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background: $bg-white-color;
  // position: fixed;
  // bottom: 100px;
  // left: 0;
  // margin-top: 30px;
  margin-bottom: 10px;
  width: 100%;
  // padding: 0 30px;
  height: 30px;
  .lgout {
    width: 30%;
    background-color: #007aff;
    color: #ffffff;
    line-height: 30px;
    border-radius: 15px;
  }
  .onLogout {
    width: 30%;
    background-color: #e64340;
    color: #ffffff;
    line-height: 30px;
    border-radius: 15px;
  }
}
.index-page {
  .user-info {
    width: fit-content;
    margin: 10px auto;
    font-size: $text-font-size-l;
    font-weight: 700;
  }
  .data-list {
    // margin: 0 10px;
    margin: 0 0;
    &-item {
      padding: 10px;
      margin-bottom: 10px;
      border-radius: 8px;
      background: $bg-white-color;
      &-header {
        color: $brand-theme-color;
        display: flex;
        align-items: center;
        &-display_name {
          margin: 0 auto;
          // align-items: center;
          font-size: 15px;
          font-weight: 700;
        }
      }
      &-prd_name {
        width: fit-content;
        margin: 6px auto;
        font-size: $text-font-size-m;
        color: $text-font-color-2;
      }
      &-group {
        padding: 6px 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: center;
        border-top: 1px solid $border-color;
        border-bottom: 1px solid $border-color;
        //color: $brand-theme-color;
        .value {
          margin-top: 6px;
        }
      }
      &-ref {
        margin: 10px;
      }
      :deep(.uni-collapse-item__title-box) {
        padding: 0 10px;
        margin: 0;
        color: $uni-color-warning;
      }
      // :deep(.uni-collapse-item__title-text) {
      // }
      &-require {
        display: inline-block;
        margin: 0 10px;
        color: $text-font-color-2;
      }
      &-group-2 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 6px;
      }
      &-key_image {
        height: 40px;
        width: 70px;
      }
      &-no_pass {
        color: $text-font-color-2;
      }
    }
    .checked {
      border: 1px solid $brand-theme-color;
      background: rgba(21, 152, 250, 0.2);
    }
  }
}
</style> -->
